<template>
  <div class="app-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <el-page-header @back="handleBack" content="修改商品SKU" />
        </div>
      </template>
      
      <el-form
        ref="skuRef"
        :model="form"
        :rules="rules"
        label-width="200px"
        class="sku-form"
        size="default">
        
        <!-- SPU选择 -->
        <el-row>
          <el-col :span="24">
            <el-form-item label="SPU" prop="spuId">
              <el-select
                v-model="form.spuId"
                placeholder="请选择或输入SPU名称搜索"
                clearable
                filterable
                :filter-method="handleSpuSearch"
                @visible-change="handleSpuVisibleChange"
                class="full-width">
                <el-option
                  v-for="spu in productSpuList"
                  :key="spu.id"
                  :label="spu.name"
                  :value="spu.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
        <!-- SKU名称 -->
        <el-row>
          <el-col :span="24">
            <el-form-item label="SKU标题" prop="skuName">
              <el-input v-model="form.skuName" placeholder="请输入SKU标题" class="full-width" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <!-- SKU编码 -->
        <el-row>
          <el-col :span="24">
            <el-form-item label="SKU编码" prop="code">
              <el-input v-model="form.code" placeholder="请输入SKU编码" class="full-width" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 销售价 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="销售价" prop="price">
              <el-input v-model="form.price" placeholder="请输入销售价">
                <template #prepend>￥</template>
              </el-input>
            </el-form-item>
          </el-col>
          
          <!-- 原价 -->
          <el-col :span="12">
            <el-form-item label="原价" prop="originalPrice">
              <el-input v-model="form.originalPrice" placeholder="请输入原价">
                <template #prepend>￥</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 成本价 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="成本价" prop="costPrice">
              <el-input v-model="form.costPrice" placeholder="请输入成本价">
                <template #prepend>￥</template>
              </el-input>
            </el-form-item>
          </el-col>
          
          <!-- 库存数量 -->
          <el-col :span="12">
            <el-form-item label="库存数量" prop="stock">
              <el-input v-model="form.stock" placeholder="请输入库存数量">
                <template #append>件</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 库存预警值 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="库存预警值" prop="lowStock">
              <el-input v-model="form.lowStock" placeholder="请输入库存预警值">
                <template #append>件</template>
              </el-input>
            </el-form-item>
          </el-col>
          
          <!-- 重量 -->
          <el-col :span="12">
            <el-form-item label="重量" prop="weight">
              <el-input v-model="form.weight" placeholder="请输入重量">
                <template #append>g</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 体积 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="体积" prop="volume">
              <el-input v-model="form.volume" placeholder="请输入体积">
                <template #append>cm³</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 商品图片 -->
        <el-row>
          <el-col :span="24">
            <el-form-item label="商品图片" prop="productImages">
              <image-upload
                v-model="form.productImages"
                :limit="20"
                multiple
                @change="handleImageChange" />
              <div class="form-tip">
                支持上传多张图片，最多5张，按上传顺序排序
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 规格可选项（循环渲染分组）：修复prop路径 -->
        <div v-for="(group, groupIdx) in data.specGroups" :key="groupIdx" class="spec-group">
          <el-divider
            content-position="left"
            v-if="getSpecTypeData(group.type)?.specItemGroup.length">
            {{ group.label }}
          </el-divider>

          <el-row :gutter="20">
            <!-- 分组内的表单项：prop路径改为"form.specSelections"的子路径 -->
            <el-col 
              v-for="(item, itemIdx) in getSpecTypeData(group.type)?.specItemGroup"
              :key="`spec-${group.type}-${itemIdx}`"
              :span="12">
              <el-form-item
                :label="item.specName"
                :prop="`specSelections.${group.type}.${itemIdx}`"
                :rules="[{
                  required: true,
                  message: `${item.specName}不能为空`,
                  trigger: 'change',
                }]">
                <!-- 修复：v-model绑定form内的specSelections -->
                <el-select
                  v-model="form.specSelections[group.type][itemIdx]"
                  placeholder="请选择"
                  clearable
                  class="full-width">
                  <el-option
                    v-for="(option, optIdx) in item.specValueGroup"
                    :key="`opt-${group.type}-${itemIdx}-${optIdx}`"
                    :label="option"
                    :value="option" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- 操作按钮 -->
        <el-row class="form-actions">
          <el-col :span="24">
            <el-form-item>
              <el-button type="primary" @click="submitForm" size="default">保存</el-button>
              <el-button @click="handleBack" size="default">取消</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script setup name="SkuEdit">
// 接口引入（补充属性模板接口）
import { getSku, updateSku } from "@/api/product/sku";
import { listProductCategory } from "@/api/product/productCategory";
import { listProductSpu } from "@/api/product/productSpu";
import {
  getProductSpecTemplate,
  listProductSpecTemplate,
  getProductSpecTemplateGrouped,
} from "@/api/product/productSpecTemplate";

// 依赖引入
import { useRouter, useRoute } from "vue-router";
import { ref, reactive, toRefs, onMounted, getCurrentInstance } from "vue";

const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();

// 下拉选择数据源（补充属性模板列表）
const productCategoryOptions = ref([]);
const productSpuList = ref([]);
const productSpecTemplateList = ref([]);
const selectedTemplateSpecs = ref([]); // 选中模板的属性列表（编辑回显用）

// 查询参数（统一分页参数格式）
const querySpuParams = ref({ pageSize: 9999, name: "" });
const queryAllParams = ref({ pageSize: 9999 });

// 表单数据与校验规则（补充模板ID、动态属性值字段）
const data = reactive({
  form: {
    id: null, // 编辑必备：SKU主键ID
    spuId: null,
    skuName: null,
    code: null,
    categoryId: null,
    templateId: null, // 属性模板ID（新增编辑对齐）
    specValues: [], // 动态属性值（与模板属性一一对应，编辑回显核心）
    price: null,
    originalPrice: null,
    costPrice: null,
    stock: null,
    lowStock: null,
    weight: null,
    volume: null,
    productImages: [],
    status: 1, // 启用状态（默认与新增对齐）
    // 规格选中值（按specType分组，数组下标对应属性下标）
    specSelections: {
      0: [], // specType=0（售卖属性）选中值
      1: [], // specType=1（基础属性）选中值
      2: [], // specType=3（overview属性）选中值
      3: [], // specType=4（其它属性）选中值
    },
  },
  rules: {
    spuId: [{ required: true, message: "所属SPU不能为空", trigger: "blur" }],
    skuName: [{ required: true, message: "SKU标题不能为空", trigger: "blur" }],
    code: [{ required: true, message: "SKU编码不能为空", trigger: "blur" }],
    price: [{ required: true, message: "销售价不能为空", trigger: "blur" }],
    stock: [{ required: true, message: "库存数量不能为空", trigger: "blur" }],
    productImages: [
      {
        required: false,
        trigger: "change",
      },
    ],
  },
  // 规格分组配置（type对应specType，label对应分组名称）
  specGroups: [
    { type: 0, label: "售卖属性" },
    { type: 1, label: "基础属性" },
    { type: 2, label: "overview属性" },
    { type: 3, label: "尺寸属性" },
  ],
  skuId: null,
  // 规格数据源（用户提供的specTypes）
  specData: {},
  specValueGroup: [],
});

const { form, rules } = toRefs(data);

/**
 * 根据specType获取对应的规格数据
 * @param {number} type - specType（0/1/3/4）
 * @returns {object|null} 对应type的规格组数据
 */
const getSpecTypeData = (type) => {
  return (
    data.specData.specTypes?.find((item) => item.specType === type) || null
  );
};

/**
 * 按顺序提取specData中所有specName，组成specNameGroup数组
 * 顺序规则：先按specTypes数组顺序，再按每个specType内specItemGroup的顺序
 * @returns {string[]} 按顺序排列的specName数组
 */
const getSpecNameGroup = (specData) => {
  // 1. 初始化结果数组，避免空引用
  const specNameGroup = [];

  // 2. 安全获取specTypes数组（防止data或specData为空导致报错）
  const specTypes = specData?.specTypes || [];

  // 3. 第一层遍历：按specTypes原顺序遍历（如specType=0、1、2、3的顺序）
  specTypes.forEach((specTypeItem) => {
    // 4. 安全获取当前specType的specItemGroup数组
    const specItemGroup = specTypeItem?.specItemGroup || [];

    // 5. 第二层遍历：按specItemGroup原顺序遍历（如Color、Lighted、Material的顺序）
    specItemGroup.forEach((item) => {
      // 6. 过滤无效值（避免添加undefined、空字符串等）
      if (item?.specName && item.specName.trim() !== "") {
        specNameGroup.push(item.specName);
      }
    });
  });

  return specNameGroup;
};

//子组件的ref

/** 返回列表页面（与新增逻辑一致） */
function handleBack() {
  const obj = { path: "/product/sku" };
  proxy.$tab.closeOpenPage(obj);
}

/** 提交表单（补充动态属性过滤+规格值组装，与新增对齐） */
function submitForm() {
  proxy.$refs["skuRef"].validate((valid) => {
    if (valid) {
      // 1. 组装规格值（与后端接收格式对齐）
      const specValueGroup = [];
      Object.values(form.value.specSelections).forEach((arr) => {
        specValueGroup.push(...arr.filter((val) => val));
      });
      
      // 1.2 组装规格名（与后端接收格式对齐）
      const specNameGroup = [];
      data.specData.specTypes.forEach((item) => {
        item.specItemGroup.forEach((subItem) => {
          specNameGroup.push(subItem.specName);
        });
      });
      
      // 2. 过滤空值属性（保持与新增接口提交格式一致）
      const submitForm = {
        ...form.value,
        specValues: form.value.specValues.filter((item) =>
          item.specValue?.trim()
        ),
        specValueGroupList: specValueGroup, // 补充规格值数组
        specNameGroupList: specNameGroup, // 补充规格名称数组
        // 统一字段类型（避免后端类型校验报错）
        id: Number(form.value.id),
        spuId: form.value.spuId ? Number(form.value.spuId) : null,
        categoryId: form.value.categoryId
          ? Number(form.value.categoryId)
          : null,
        templateId: form.value.templateId
          ? Number(form.value.templateId)
          : null,
        status: Number(form.value.status),
      };
      
      // 调用编辑接口
      updateSku(submitForm)
        .then((response) => {
          proxy.$modal.msgSuccess("修改成功");
          handleBack();
        })
        .catch((err) => {
          proxy.$modal.msgError(err.msg || "修改失败，请重试");
        });
    }
  });
}

/** 处理图片上传（补充SKU ID关联+name字段，适配预览） */
function handleImageChange(images) {
  form.value.productImages = images.map((img, index) => ({
    id: img.id || null, // 保留原有图片ID，避免重复上传
    url: img.url,
    name: img.url ? img.url.split("/").pop() : `img-${index}`, // 补充name字段，适配上传组件预览
    sort: index + 1,
    spuId: form.value.spuId ? Number(form.value.spuId) : null,
    skuId: form.value.id ? Number(form.value.id) : null, // 编辑时关联当前SKU
  }));
}

/** 获取商品分类树形结构（与新增逻辑一致） */
function getCategoryTreeselect() {
  listProductCategory(queryAllParams.value).then((response) => {
    productCategoryOptions.value = [];
    const rootNode = { id: 0, name: "顶级节点", children: [] };
    rootNode.children = proxy.handleTree(response.data, "id", "parentId");
    productCategoryOptions.value.push(rootNode);
  });
}

/** 获取SPU列表（与新增逻辑一致） */
function getSpuList() {
  // 修复：使用解构和重新构建参数对象的方式，避免传递Vue内部属性
  const cleanParams = {
    pageSize: querySpuParams.value.pageSize,
    name: querySpuParams.value.name
  };
  listProductSpu(cleanParams).then((response) => {
    productSpuList.value = response.rows;
  });
}

/** 获取属性模板列表（与新增逻辑一致，用于下拉回显） */
function getTemplateList() {
  listProductSpecTemplate(queryAllParams.value).then((response) => {
    // 处理status为字符串（适配下拉选择）
    productSpecTemplateList.value = response.rows.map((row) => ({
      ...row,
      status: String(row.status),
    }));
  });
}

/** SPU搜索防抖处理（与新增逻辑一致） */
function debounce(fn, delay = 300) {
  let timer = null;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

// 使用防抖处理SPU搜索
const handleSpuSearch = debounce((inputValue) => {
  // 创建纯净的查询参数对象，避免传递Vue内部属性
  const searchParams = {
    pageSize: 9999,
    name: inputValue || ""
  };
  listProductSpu(searchParams).then((response) => {
    productSpuList.value = response.rows;
  });
});

// 处理下拉框显示/隐藏事件
const handleSpuVisibleChange = (visible) => {
  if (visible) {
    // 显示下拉框时，重新加载完整的SPU列表
    const searchParams = {
      pageSize: 9999
    };
    listProductSpu(searchParams).then((response) => {
      productSpuList.value = response.rows;
    });
  }
};

/** 模板切换：加载属性并初始化specValues（保留原逻辑，按需启用） */
function handleTemplateChange(templateId) {
  selectedTemplateSpecs.value = [];
  form.value.specValues = [];

  if (templateId) {
    getProductSpecTemplate(templateId).then((response) => {
      const template = response.data;
      // 过滤有效属性（关联关系+属性本身存在）
      const validSpecs = (template.relationList || [])
        .filter((relation) => relation.productSpec && relation.productSpec.id)
        .map((relation) => ({
          ...relation.productSpec,
          relation: relation, // 保留关联信息（排序、是否必填）
        }));

      // 按排序字段排序
      validSpecs.sort(
        (a, b) => (a.relation.sort || 0) - (b.relation.sort || 0)
      );
      selectedTemplateSpecs.value = validSpecs;

      // 初始化specValues：与属性一一对应
      form.value.specValues = validSpecs.map((spec) => ({
        specId: spec.id,
        specValue: "",
      }));
    });
  }
}

/** 获取规格可选值（接口调用，保留原逻辑） */
const getProductSpecTemplateGroupedApi = (spuId) => {
  getProductSpecTemplateGrouped(spuId).then((res) => {
    console.log(JSON.stringify(res.data), "这是可选值");
    data.specData = res.data;
    // 初始化规格选中值：默认选中每个属性的第一项
    data.specGroups.forEach((group) => {
      const specTypeData = getSpecTypeData(group.type);
      if (specTypeData?.specItemGroup) {
        // 从data.specSelections改为form.specSelections
        form.value.specSelections[group.type] = specTypeData.specItemGroup.map(
          (item) => {
            return item.specValueGroup[0] || ""; // 取第一项作为默认值
          }
        );
      }
    });
  });
};

const initSpecValues = ref([]);

/** 辅助方法：规格选中值（specSelections）精准回显 */
function handleSpecSelectionsEcho(specNameGroup = [], specValueGroup = []) {
  // 1. 建立「规格名 → 规格值」的映射（解决顺序匹配问题）
  const specNameToValueMap = {};
  specNameGroup.forEach((name, index) => {
    if (name && specValueGroup[index]) {
      specNameToValueMap[name.trim()] = specValueGroup[index].trim();
    }
  });

  // 2. 遍历所有规格组（按specType分组），匹配并赋值
  data.specGroups.forEach((group) => {
    const specType = group.type; // 当前规格组的type（如0：售卖属性）
    const specTypeData = getSpecTypeData(specType); // 获取该type对应的规格数据

    if (specTypeData?.specItemGroup) {
      // 3. 对当前type下的每个规格项，匹配映射中的值
      form.value.specSelections[specType] = specTypeData.specItemGroup.map(
        (item) => {
          const specName = item.specName.trim();
          // 优先用后端返回的值，无则用规格项的默认值（第一项），兜底空字符串
          return specNameToValueMap[specName] || item.specValueGroup[0] || "";
        }
      );
    }
  });
}

/** 获取SKU详情（修复核心：保留form结构+类型统一+规格回显） */
function getSkuDetail(id) {
  const idNum = Number(id); // 统一ID类型为数字
  getSku(idNum)
    .then((response) => {
      const skuData = response.data;
      // 1. 处理动态属性初始值（确保specId和specValue匹配，统一类型）
      initSpecValues.value = (skuData.specValues || []).map((specValue) => ({
        specId: Number(specValue.specId) || null, // 统一转为数字，避免类型不匹配
        specValue: specValue.specValue || "", // 空值兜底
      }));
      // 2. 基础字段回显：保留form原有结构（关键！避免specSelections被覆盖）
      form.value = {
        ...form.value, // 保留form初始结构（含specSelections）
        ...skuData, // 覆盖后端返回的基础数据
        // 统一数字类型（解决el-select无法选中问题）
        id: Number(skuData.id) || null,
        spuId: skuData.spuId ? Number(skuData.spuId) : null,
        categoryId: skuData.categoryId ? Number(skuData.categoryId) : null,
        templateId: skuData.templateId ? Number(skuData.templateId) : null,
        status: skuData.status ? Number(skuData.status) : 1, // 状态默认1（启用）
        price: skuData.price || null,
        originalPrice: skuData.originalPrice || null,
        costPrice: skuData.costPrice || null,
        stock: skuData.stock ? Number(skuData.stock) : null,
        lowStock: skuData.lowStock ? Number(skuData.lowStock) : null,
        weight: skuData.weight ? Number(skuData.weight) : null,
        volume: skuData.volume ? Number(skuData.volume) : null,
        skuName: skuData.skuName || null,
        // 3. 商品图片回显：适配上传组件格式（补充name字段）
        productImages: (skuData.productImages || []).map((img, index) => ({
          id: img.id ? Number(img.id) : null, // 图片ID（用于识别原有图片）
          url: img.url || "", // 图片地址（核心）
          name: img.url ? img.url.split("/").pop() : `img-${index}`, // 补充name，适配预览
          sort: img.sort ? Number(img.sort) : index + 1, // 排序字段兜底
        })),
        // 4. 动态属性回显：匹配specId
        specValues: [...initSpecValues.value],
        // 5. 保留后端返回的规格名/值列表（用于后续specSelections回显）
        specNameGroup: skuData.specNameGroup || [],
        specValueGroup: skuData.specValueGroup || [],
      };
      console.log("修复后form数据：", form.value); // 调试用：确认数据结构
      getProductSpecTemplateGroupedApi(form.value.spuId);
    })
    .catch((err) => {
      proxy.$modal.msgError(err.msg || "获取SKU详情失败");
    });
}
//上传图片方法
async function uploadImage() {
  if (uploadImageRef.value) {
    return uploadImageRef.value.uploadAllImages();
  }
}

/** 页面初始化加载数据（修复：删除默认赋值，避免覆盖回显数据） */
onMounted(() => {
  const id = route.params.id; // 从路由获取SKU ID
  // 加载基础数据源
  getCategoryTreeselect();
  getSpuList();
  getTemplateList(); // 加载属性模板列表（用于下拉回显）
  // 优先加载SKU详情（核心回显逻辑）
  if (id) {
    getSkuDetail(id);
    data.skuId = id;
  }
  // 加载规格可选值（保留原逻辑）
  getProductSpecTemplateGroupedApi(10);
  // ！删除原默认赋值逻辑：避免覆盖后端回显的specSelections值
  // 原逻辑：data.specGroups.forEach(...) 已移至handleSpecSelectionsEcho
});
</script>

<style scoped>
.sku-form {
  padding: 20px;
}

.full-width {
  width: 100%;
}

.form-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}

.spec-group {
  margin-bottom: 20px;
}

.form-actions {
  margin-top: 30px;
  text-align: center;
}

:deep(.el-form-item__label) {
  font-weight: 500;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
